<template>
  <el-form :model="examFormat" label-width="120px">
    <el-form-item label="问卷标题">
      <el-input v-model="examFormat.examTitle"></el-input>
    </el-form-item>
    <el-form-item label="问卷描述">
      <el-input type="textarea" v-model="examFormat.description"></el-input>
    </el-form-item>
    <el-form-item
        v-for="(question, index) in examFormat.questions"
        :key="index"
        :label="`题目 ${index + 1}`"
    >
      <el-select v-model="question.questionType" placeholder="请选择题目类型">
        <el-option label="判断题" value="judgment"></el-option>
        <el-option label="单选题" value="single"></el-option>
        <el-option label="多选题" value="multiple"></el-option>
      </el-select>
      <el-input v-model="question.content" placeholder="请输入题目内容"></el-input>
      <el-input
          v-if="question.questionType === 'single' || question.questionType === 'multiple'"
          v-model="question.options"
          placeholder="请输入选项，用中文逗号分隔"
      ></el-input>
      <el-input
          v-if="question.questionType === 'judgment'"
          v-model="question.answer"
          placeholder="请输入答案,请填写true或者false（true正确/false错误）"
      ></el-input>
      <el-input
          v-if="question.questionType === 'single' || question.questionType === 'multiple'"
          v-model="question.answer"
          placeholder="请输入答案,用英文逗号分割"
      ></el-input>
      <el-button @click="removeQuestion(index)">删除题目</el-button>
      <el-text type="primary">题目分值：</el-text>
      <el-input-number v-model="question.questionScore" :min="1" :max="20"/>
    </el-form-item>
    <el-button @click="addQuestion">添加题目</el-button>
    <el-button type="primary" @click="submitSurvey">发布问卷</el-button>
  </el-form>
</template>

<script setup>
import {onBeforeMount, reactive, ref} from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";
import examApi from "../../api/exam.js"

const router = useRoute();

onBeforeMount(async () => {
  let courseId = router.query.courseId;
})

let examFormat = reactive({
  courseId: '',
  examTitle: '',
  description: '',
  questions: [],
});

const addQuestion = () => {
  examFormat.questions.push({
    questionType: '',
    content: '',
    options: '',
    answer: '',
    questionScore: '',
  });
};

const removeQuestion = (index) => {
  examFormat.questions.splice(index, 1);
};

const submitSurvey = async () => {
  examFormat.courseId = router.query.courseId;
  await examApi.add(examFormat).then((res) => {
    if(res.data.code === 200){
      ElMessage.success("发布成功")
    } else {
      ElMessage.error(res.data.msg)
    }
  })
};
</script>